<template>
  <div
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="scrollDisabled"
    infinite-scroll-distance="30"
    :style="{ backgroundColor: bgColor }"
    :class="$style.theme"
  >
    <topbar v-if="!themeId" rightTitle="Home" :title="title" rightIcon="shouye" :nextAction="goHome" />
    <div v-for="item in content">
      <banner
        v-if="item.type===1"
        :imageUrl="item.data.bannerImg"
        :jumpContent="item.data.url"
        :jumpType="item.data.urlType"
        :category="category"
      />
      <intro
        :backgroundColor="item.data.descBgColor"
        :description="item.data.description"
        v-if="item.type===2"
        :category="category"
      />
      <goods-special :goodsSpecial="item.data" :category="category" v-if="item.type===3" />
      <goods-flow :goodsInfos="item.data.goodsInfos" :category="category" v-if="item.type===4" />
    </div>
    <div :class="$style.loading" v-if="!isEnd && !scrollDisabled">loading...</div>
    <div :class="$style.done" v-if="isEnd"></div>
    <a
      href="#"
      @click="shareClick"
      class="v-top-icon"
      :class="$style.shareIcon"
      v-analytics.click="{
        action: 'Share Cilck',
        category: 'M-Home Page',
      }"
    />
    <toTopIcon
      v-analytics.click="{
        action: 'Back to top',
        category: category,
      }"
    />
    <loading :show="pageLoading" :cover="true" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { loading, toTopIcon, topbar } from 'components'
import banner from './banner'
import intro from './intro'
import goodsFlow from './goodsFlow'
import goodsSpecial from './goodsSpecial'

export default {
  name: 'goodsTheme',
  props: {
    themeId: String,
  },
  components: {
    banner,
    intro,
    goodsFlow,
    goodsSpecial,
    loading,
    toTopIcon,
    topbar,
  },
  computed: {
    ...mapGetters([
      'content',
      'title',
      'bgColor',
      'pageLoading',
      'currentPage',
    ]),
  },
  data() {
    // 判断是子专题页面还是首页
    const isSubjectPage = this.$route.fullPath.includes('compilationsTheme')

    return {
      page: 1,
      scrollDisabled: true,
      isEnd: false,
      category: isSubjectPage ? 'Special Subject' : 'M-Home Page',
    }
  },
  created() {
    this.id = this.themeId || this.$route.query.id

    if (this.content.length > 0 && this.currentPage > 0) {
      this.page = this.currentPage + 1
      this.scrollDisabled = false
    } else {
      this.$store.dispatch('getThemeInfoById', this.id)
        .then((res) => {
          if (!res.body.length) {
            this.getThemeInfoBody(1)
          } else {
            this.isEnd = true
          }
        })
    }
  },
  methods: {
    goHome() {
      this.$router.push({ path: '/' })
    },
    shareClick(e) {
      e.preventDefault()
      this.$router.push({ path: '/advertisement' })
    },
    loadMore() {
      this.scrollDisabled = true
      this.getThemeInfoBody(this.page)
    },
    getThemeInfoBody(page) {
      this.page = page + 1
      this.$store.dispatch('getThemeInfoBody', { tid: this.id, page })
        .then((res) => {
          if (res.data.length > 0) {
            this.scrollDisabled = false
          } else {
            this.isEnd = true
          }
        })
    },
  },
}
</script>

<style module lang="scss">
.loading,
.done {
  width: 100%;
  height: 48px;
  background-size: 100% 100%;
}

.loading {
  line-height: 48px;
  text-align: center;
}

.done {
  background-image: url("assets/goodsTheme/loding.png");
}

.theme {
  .shareIcon {
    bottom: 90px;
    background-image: url("assets/icons/share.png");
    &:active {
      background-image: url('assets/icons/share-active.png');
    }
  }
}
</style>
